import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'
import { View } from '@tarojs/components'
import {
  AtList,
  AtListItem,
  AtPagination,
  AtActivityIndicator,
  AtMessage
} from 'taro-ui'
import { useStore } from '../../../../model/index'
import { searchTags, getTagsList } from '../../../../api/index'
import TagCard from '../tagsCard/index'

interface TagsListArrResType {
  name: string
  newLikeWeek: number
  newViewWeek: number
  newCountWeek: number
  id: number
}

export default () => {
  const [state, actions] = useStore('Index')
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [loading, setloading] = useState(true)
  const [tagsList, setTagsList] = useState<TagsListArrResType[]>([])

  useEffect(() => {
    setloading(true)

    // 只要搜索，更改一级标签，二级标签，都会触发list更新
    console.log('触发useEffect')
    ;(async () => {
      let params = {}

      if (state.keyword) {
        console.log('搜索')

        /**
         * @description视频列表下搜索有一种情况
         */
        params = {
          filters: {
            type: '',
            tagCreateTime: '',
            tagSubscribedNumber: '',
            tagViewNumber: '',
            tagVideoNumber: ''
          },
          pageSize: 10,
          sort: '',
          keyword: state.keyword,
          page: 1
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await searchTags(params)

        if (!errorCode) {
          setTagsList(data.tagInformationList)
        } else {
          Taro.atMessage({
            message: errorMessage + ',请充值',
            type: 'error'
          })
        }

        setTotal(500)
        setloading(false)
      } else {
        const params = {
          page: 1,
          pageSize: 10,
          rankType: 1,
          dayType: 'Week'
        }

        const {
          data: { data, errorCode, errorMessage }
        } = await getTagsList(params)

        if (!errorCode) {
          setTagsList(data.rankList)
        } else {
          Taro.atMessage({
            message: errorMessage + '，请充值',
            type: 'error'
          })
        }
        setTotal(500)
        setloading(false)
      }
    })()

    setCurrent(1)
  }, [state.keyword])

  const tapToDetails = (id) => {
    Taro.navigateTo({
      url: `/packageC/tags/index?id=${id}`
    })
  }

  const setLists = () => {
    // 防止异常情况
    // if (!videoList) setvideoList([])

    if (tagsList.length !== 0)
      return tagsList.map((item) => {
        return (
          <View onClick={() => tapToDetails(item.id)}>
            <TagCard
              name={item.name}
              newView={item.newViewWeek}
              newLike={item.newLikeWeek}
              newCount={item.newCountWeek}
            ></TagCard>
          </View>
        )
      })
  }

  const onPageChange = (data) => {
    let { current } = data
    setloading(true)
    setCurrent(current)
    // console.log(current)
    ;(async () => {
      let params = {}

      if (state.keyword) {
        /**
         * @description有搜索有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */

        params = {
          filters: {
            type: '',
            tagCreateTime: '',
            tagSubscribedNumber: '',
            tagViewNumber: '',
            tagVideoNumber: ''
          },
          pageSize: 10,
          sort: '',
          keyword: state.keyword,
          page: current
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await searchTags(params)

        if (!errorCode) {
          setTagsList(data.tagInformationList)
        } else {
          Taro.atMessage({
            message: errorMessage + '，请充值',
            type: 'error'
          })
        }
        setTotal(500)
        setloading(false)
      } else {
        /**
         * @description无搜索层级有三种情况
         * 第一层级为全部，第二层级只有全部，此时tid和level不传
         * 第一层级为其他，第二层级为全部，tid传第一层级的，level是1
         * 第一层级为其他，第二层级为其他，tid传第二层级，level是2
         */
        params = {
          page: current,
          pageSize: 10,
          rankType: 1,
          dayType: 'Week'
        }
        const {
          data: { data, errorCode, errorMessage }
        } = await getTagsList(params)

        if (!errorCode) {
          setTagsList(data.rankList)
        } else {
          Taro.atMessage({
            message: errorMessage + ',请充值',
            type: 'error'
          })
        }
        setTotal(500)
        setloading(false)
      }
    })()
  }

  return (
    <View className="at-list-wrap">
      {loading ? (
        <AtActivityIndicator mode="center"></AtActivityIndicator>
      ) : (
        <View>
          <AtList>{setLists()}</AtList>
          <AtPagination
            icon
            total={total}
            pageSize={10}
            current={current}
            onPageChange={onPageChange}
          ></AtPagination>
        </View>
      )}
    </View>
  )
}
